<template>
  <view class="order">
    <view class="msglist">
      <view class="title">订单信息</view>
      <view class="list">
        产品
        <text>{{ $utils.parOrderType(orderDetail.orderType) || '--' }}</text>
      </view>
      <view class="list">
        订单号
        <text>{{ orderDetail.orderNum || '--' }}</text>
      </view>
      <view class="list">
        车牌号
        <text>{{ orderDetail.carNum || '--' }}</text>
      </view>
      <view class="list">
        订单状态
        <text>{{ $utils.parOrderState(orderDetail.orderState) || '--' }}</text>
      </view>
      <view class="list">
        支付金额
        <text>{{ orderDetail.actPrice || '--' }}</text>
      </view>

      <view class="list">
        预约时间
        <text>{{ orderDetail.bookTime || '--' }}</text>
      </view>
      <view class="list">
        下单时间
        <text>{{ orderDetail.gmtTime || '--' }}</text>
      </view>
      <view class="list">
        会员电话
        <text>{{ member.mobile || '--' }}</text>
      </view>
    </view>
    <!--邮寄地址-->
    <view class="msglist" v-if="orderContactAddr">
      <view class="title">邮寄/取车信息 <view class="copy" @click="copyAddr">复制</view></view>
      <view class="list">
        联系人
        <text>{{ orderContactAddr.contactName || '--' }}</text>
      </view>
      <view class="list">
        联系电话
        <text>{{ orderContactAddr.contactMobile || '--' }}</text>
      </view>
      <view class="list">
        联系地址:
        {{
          orderContactAddr.pickFullAddr +
            ' -- ' +
            orderContactAddr.pickAddr +
            ' -- ' +
            orderContactAddr.addrDetail
        }}
      </view>
    </view>

    <!--检测站信息-->
    <view class="msglist" v-if="station">
      <view class="title">检测站信息</view>
      <view class="list">
        检测站名称
        <text>{{ station.name || '--' }}</text>
      </view>
      <view class="list">
        检测站地址
        <text>{{ station.locAddr || '--' }}</text>
      </view>
      <view class="list">
        检测站电话
        <text>{{ station.mobile || '--' }}</text>
      </view>
    </view>
    <!--司机信息-->
    <view class="msglist" v-if="driver">
      <view class="title">代驾司机信息</view>
      <view class="list">
        司机姓名
        <text>{{ driver.driverName || '--' }}</text>
      </view>
      <view class="list">
        司机电话
        <text>{{ driver.driverMobile || '--' }}</text>
      </view>
    </view>
    <!--订单图片-->
    <view class="msglist" v-if="imgList.length > 0">
      <view class="title">订单图片</view>
      <view class="msglist-pic-content">
        <view
          class="pic-item-content"
          v-for="(item, idx) in imgList"
          :key="idx"
          @click="goImage(item.url)"
        >
          <image :src="item.url" class="pic-item" />
          <view class="pic-desc">{{ item.name }}</view>
        </view>
      </view>
      <!--确认材料 -->
    </view>

    <u-mask :show="showPicMask" @click="showPicMask = false">
      <view class="picMask">
        <image :src="showPicUrl" class="pic-item" />
      </view>
    </u-mask>

    <!-- 修改底部按钮展示 -->
    <view class="bottom">
      <!--未支付和未取消状态的订单展示支付按钮 -->
      <!--      <view class="pay" v-if="canSubmitTuikuan()" @click="kkrefund">扣款退款</view>-->
      <view class="pay" v-if="canSubmitTuikuan()" @click="kkrefund">扣款退款</view>
      <!--完成按钮-->
      <view class="cancel" @click="finish" v-if="canSubmitFinish()">完成</view>
      <!--免检受理 -->
      <view
        class="cancel"
        @click="mjsl"
        v-if="orderDetail.orderType === 1 && orderDetail.orderState === 1"
        >受理</view
      >
      <!--免检完结-->
      <view
        class="cancel"
        @click="mjwj"
        v-if="orderDetail.orderType === 1 && orderDetail.orderState === 3"
        >完结</view
      >

      <!--免检完结-->
      <view
        class="cancel"
        @click="jumpToDriver(orderDetail.id)"
        v-if="orderDetail.orderType === 2 && orderDetail.orderState === 1"
        >指派驾驶员</view
      >

      <!--免检完结-->
      <view
        class="cancel"
        @click="jumpToStation(orderDetail.id)"
        v-if="orderDetail.orderType === 3 && orderDetail.orderState < 21"
        >指派检测站</view
      >
    </view>
    <!--免检完结-->
    <u-popup class="card-popup" v-model="popup" mode="center" border-radius="16" length="90%">
      <view class="input">
        <text>检测结果</text>
        <picker
          mode="selector"
          @change="onAuditChange"
          :range-key="auditRangeKey"
          :value="mjwjForm.checkResult"
          :range="auditStateList"
        >
          <view class="uni-input">{{
            parAuditLabel(mjwjForm.checkResult) || '请选择检测结果'
          }}</view>
        </picker>
        <u-icon name="arrow-right" color="#2979ff" size="28"></u-icon>
      </view>
      <view class="input" v-if="mjwjForm.checkResult === '2'">
        <text>拒绝原因</text>
        <picker
          v-if="reasonType"
          mode="selector"
          @change="onResonChange"
          :range-key="resonRangeKey"
          :value="mjwjForm.rejectReason"
          :range="resonList"
        >
          <view class="uni-input">{{
            $utils.parDictLabel(resonList, mjwjForm.rejectReason) || '请选择拒绝原因'
          }}</view>
        </picker>
        <input
          v-else
          class="uni-input"
          type="text"
          @input="onResonInputChange"
          :value="mjwjForm.rejectReason"
          placeholder="请填写拒绝原因"
          maxlength="100"
        />
        <text class="qihuan" @click="reasonChg">切换</text>
        <u-icon name="arrow-right" color="#2979ff" size="28"></u-icon>
      </view>
      <view class="input">
        <text>快递公司</text>
        <picker
          mode="selector"
          @change="onComChange"
          :range-key="resonRangeKey"
          :value="mjwjForm.expressCompany"
          :range="comList"
        >
          <view class="uni-input">{{
            $utils.parDictLabel(comList, mjwjForm.expressCompany) || '请选择快递公司'
          }}</view>
        </picker>
        <u-icon name="arrow-right" color="#2979ff" size="28"></u-icon>
      </view>
      <view class="input">
        <text>快递单号</text>
        <input
          class="uni-input"
          type="text"
          @input="onExpressNumberChange"
          :value="mjwjForm.expressNumber"
          placeholder="请输入快递单号"
          maxlength="32"
        />
        <u-icon name="arrow-right" color="#2979ff" size="28"></u-icon>
      </view>
      <view class="input">
        <text>年检标签</text>
        <view class="picture-item">
          <view>
            <icon type="cancel" v-if="mjwjForm.sixLable" size="26" @click="clearPic()" />
            <image
              class="imgage"
              v-if="tempImgUrl"
              :src="tempImgUrl"
              @click="showPreviewImage(tempImgUrl)"
            />
            <image
              class="imgageDefault"
              v-else
              src="../../static/images/six-label.png"
              @click="sendChoosePic()"
            />
          </view>
        </view>
      </view>

      <view class="button">
        <view class="cancel" @click="cancelMjwj()">取消</view>
        <view class="sub" @click="confirmMjwj()">确定</view>
      </view>
    </u-popup>
    <!--扣款退款弹出框-->
    <u-popup class="card-popup" v-model="tkpopup" mode="center" border-radius="16" length="90%">
      <view class="input">
        <text>扣款金额</text>
        <picker
          mode="selector"
          @change="onkkAmountChange"
          :range-key="resonRangeKey"
          :value="ddkkform.kkAmount"
          :range="orderChargeList"
        >
          <view class="uni-input">{{
            parKkAmountLabel(ddkkform.kkAmount) || '请选择扣款金额'
          }}</view>
        </picker>
        <u-icon name="arrow-right" color="#2979ff" size="28"></u-icon>
      </view>
      <view class="input">
        <text>扣款原因</text>
        <input
          class="uni-input"
          type="text"
          @input="onkkformRemarkChange"
          :value="ddkkform.remark"
          placeholder="请输入扣款原因"
          maxlength="128"
        />
        <u-icon name="arrow-right" color="#2979ff" size="28"></u-icon>
      </view>
      <view class="button">
        <view class="cancel" @click="canceltkPop()">取消</view>
        <!--        <view class="sub" @click="confirmTkRefund()">确定</view>-->
        <view class="sub" @click="preCheckTkRefund()">确定</view>
      </view>
    </u-popup>

    <u-modal
      v-model="preCheckModel"
      title="提示"
      :content="preCheckMsg"
      show-cancel-button="“true”"
      confirmText="金额无误，继续退款"
      cancel-text="我要重新审核"
      @confirm="confirmTkRefund()"
    ></u-modal>
  </view>
</template>

<script>
export default {
  onLoad(optData) {
    this.order = JSON.parse(optData.order);
  },

  data() {
    return {
      order: {},
      showPicUrl: '',
      showPicMask: false,
      popup: false,
      tkpopup: false,
      // 取消原因
      inputReason: '',
      successModalState: false,
      delModalState: false,
      more: false,
      orderId: undefined,
      orderDetail: {},
      imgList: [],
      member: {},
      station: null,
      driver: null,
      orderContactAddr: null,
      mjwjForm: {
        checkResult: '',
        rejectReason: '',
        expressCompany: '',
        expressNumber: '',
        sixLable: '',
      },
      auditStateList: [
        {
          label: '审核通过',
          value: '1',
        },
        {
          label: '审核拒绝',
          value: '2',
        },
      ],
      resonList: [],
      orderChargeList: [],
      comList: [],
      auditRangeKey: 'label',
      resonRangeKey: 'dictLabel',
      reasonType: true,
      ddkkform: {
        orderId: undefined,
        kkAmount: undefined,
        remark: '',
      },
      tempImgUrl: '',
      preCheckMsg: '',
      preCheckModel: false,
    };
  },
  created() {},
  computed: {},
  mounted() {
    this.init();
    this.fetchComList();
    this.fetchResonList();
    this.fetchOrderChargeList();
  },
  methods: {
    /*是否能够退款*/
    canSubmitTuikuan() {
      let payState = this.orderDetail.isPay;
      let orderState = this.orderDetail.orderState;
      // 如果未支付不能退款
      if (0 == payState) {
        return false;
      }
      // 已完成不能退款
      if (orderState == 21) {
        return false;
      }
      // 已退款不能退款
      if (orderState == 104 || orderState == 109 || orderState == 110) {
        return false;
      }
      // 检测站核销过后不能退款
      if (2 == this.orderDetail.orderType) {
        if (orderState >= 12 && orderState <= 21) {
          return false;
        }
      }
      return true;
    },
    /*是否能够完成按钮*/
    canSubmitFinish() {
      let payState = this.orderDetail.isPay;
      let orderState = this.orderDetail.orderState;
      // 如果未支付不能退款
      if (0 == payState) {
        return false;
      }
      // 已完成不能退款
      if (orderState == 21) {
        return false;
      }
      // 已退款不能执行完成
      if (orderState < 1 || orderState > 18) {
        return false;
      }
      return true;
    },
    reasonChg() {
      console.log('切换展示');
      this.reasonType = !this.reasonType;
    },
    jumpToStation(orderId) {
      this.$utils.jumpToOtherPage({
        jumpUrl: `/pages/station/station-list?orderId=` + orderId,
      });
    },
    jumpToDriver(orderId) {
      this.$utils.jumpToOtherPage({
        jumpUrl: `/pages/driver/driver-list?orderId=` + orderId,
      });
    },
    fetchComList() {
      this.$clApi.haoleiAgentApi
        .fetchDict({
          dictType: 'express_company',
        })
        .then(res => {
          if (res.code === 200) {
            this.comList = res.data;
          }
        });
    },

    fetchResonList() {
      this.$clApi.haoleiAgentApi
        .fetchDict({
          dictType: 'six_year_reject_reason',
        })
        .then(res => {
          if (res.code === 200) {
            this.resonList = res.data;
          }
        });
    },
    fetchOrderChargeList() {
      this.$clApi.haoleiAgentApi
        .fetchDict({
          dictType: 'order_charge',
        })
        .then(res => {
          if (res.code === 200) {
            this.orderChargeList = res.data;
          }
        });
    },

    init() {
      this.fetchOrderDetail();
      this.fetchOrderImg();
      this.fetchMember();
      this.fetchStation();
      this.fetchDriver();
      this.fetchOrderContactAddr();
    },
    goImage(e) {
      // e=this.imgUrl+e;
      uni.previewImage({
        urls: [e],
        longPressActions: {
          success: function(data) {
            console.log(data);
          },
        },
      });
    },

    fetchOrderDetail() {
      this.$clApi.haoleiAgentApi
        .fetchOrderDetail({
          data: {
            id: this.order.id,
          },
        })
        .then(res => {
          if (res.code === 200) {
            this.orderDetail = res.data;
          }
        });
    },
    fetchOrderContactAddr() {
      this.$clApi.haoleiAgentApi
        .fetchOrderContactAddr({
          data: {
            orderId: this.order.id,
          },
        })
        .then(res => {
          if (res.code === 200) {
            this.orderContactAddr = res.data;
          }
        });
    },

    fetchOrderImg() {
      this.$clApi.haoleiAgentApi
        .fetchOrderImg({
          data: {
            orderId: this.order.id,
          },
        })
        .then(res => {
          if (res.code === 200) {
            this.imgList = res.data;
          }
        });
    },

    fetchMember() {
      this.$clApi.haoleiAgentApi
        .fetchMemberDetail({
          data: {
            memberId: this.order.memberId,
          },
        })
        .then(res => {
          if (res.code === 200) {
            this.member = res.data;
          }
        });
    },

    fetchStation() {
      if (this.order.stationId) {
        this.$clApi.haoleiAgentApi
          .fetchStationDetail({
            data: {
              stationId: this.order.stationId,
            },
          })
          .then(res => {
            if (res.code === 200) {
              this.station = res.data;
            }
          });
      }
    },

    fetchDriver() {
      if (this.order.driverId) {
        this.$clApi.haoleiAgentApi
          .fetchDriverDetail({
            data: {
              driverId: this.order.driverId,
            },
          })
          .then(res => {
            if (res.code === 200) {
              this.driver = res.data;
            }
          });
      }
    },

    kkrefund() {
      this.tkpopup = true;
      this.ddkkform.orderId = this.orderDetail.id;
    },

    preCheckTkRefund() {
      this.$clApi.haoleiAgentApi
        .fetchRefundPreCheck({
          data: {
            type: 'order',
            orderId: this.ddkkform.orderId,
          },
        })
        .then(res => {
          if (res.subCode && res.subCode == 500) {
            this.preCheckMsg = res.msg;
            this.showModal = false;
            this.preCheckModel = true;
          } else {
            this.confirmTkRefund();
          }
        });
    },

    confirmTkRefund() {
      this.$clApi.haoleiAgentApi
        .fetchOrderTkRefund({
          data: this.ddkkform,
        })
        .then(res => {
          if (res.code === 200) {
            this.tkpopup = false;
            this.preCheckModel = false;
            this.$utils.toast(res.msg);
            this.init();
          }
        });
    },

    mjsl() {
      this.$clApi.haoleiAgentApi
        .fetchOrderMjsl({
          data: {
            orderId: this.orderDetail.id,
          },
        })
        .then(res => {
          if (res.code === 200) {
            this.init();
          }
        });
    },
    /*订单完成*/
    finish() {
      this.$clApi.haoleiAgentApi
        .fetchOrderManelFinish({
          data: {
            orderId: this.orderDetail.id,
          },
        })
        .then(res => {
          if (res.code === 200) {
            this.init();
          }
        });
    },
    /*免检完结*/
    mjwj() {
      this.popup = true;
    },
    /*免检完结取消*/
    cancelMjwj() {
      this.popup = false;
      let orderId = this.order.id;
      this.mjwjForm = {
        orderId: orderId,
        checkResult: '',
        rejectReason: '',
        expressCompany: '',
        expressNumber: '',
      };
    },
    canceltkPop() {
      this.tkpopup = false;
    },
    /*免检确定*/
    confirmMjwj() {
      this.mjwjForm.orderId = this.order.id;
      this.$clApi.haoleiAgentApi
        .fetchOrderMjwj({
          data: this.mjwjForm,
        })
        .then(res => {
          if (res.code === 200) {
            this.init();
            this.popup = false;
          }
        });
    },

    onAuditChange(e) {
      this.mjwjForm.checkResult = this.auditStateList[e.target.value].value;
    },

    onResonChange(e) {
      this.mjwjForm.rejectReason = this.resonList[e.target.value].dictValue;
    },

    onkkAmountChange(e) {
      this.ddkkform.kkAmount = this.orderChargeList[e.target.value].dictValue;
    },
    onResonInputChange(e) {
      this.mjwjForm.rejectReason = e.target.value && e.target.value;
    },

    onkkformRemarkChange(e) {
      this.ddkkform.remark = e.target.value && e.target.value;
    },

    onComChange(e) {
      this.mjwjForm.expressCompany = this.comList[e.target.value].dictValue;
    },

    onExpressNumberChange(e) {
      this.mjwjForm.expressNumber = e.target.value && e.target.value;
    },
    parAuditLabel(val) {
      if (!val) {
        return null;
      }
      let dict = this.auditStateList.filter(item => item.value == val);
      return dict[0].label;
    },

    parKkAmountLabel(val) {
      if (!val) {
        return null;
      }
      let dict = this.orderChargeList.filter(item => item.dictValue === val);
      return dict[0].dictLabel;
    },

    copyAddr() {
      uni.setClipboardData({
        data:
          this.orderDetail.carNum +
          '  ' +
          this.orderContactAddr.contactName +
          '  ' +
          this.orderContactAddr.contactMobile +
          '  ' +
          this.orderContactAddr.pickFullAddr +
          ' -- ' +
          this.orderContactAddr.pickAddr +
          ' -- ' +
          this.orderContactAddr.addrDetail,
      });
    },

    clearPic() {
      this.tempImgUrl = '';
      this.mjwjForm.sixLable = '';
    },
    showPreviewImage(e) {
      // e=this.imgUrl+e;
      uni.previewImage({
        urls: [e],
        longPressActions: {
          success: function(data) {
            console.log(data);
          },
        },
      });
    },
    sendChoosePic() {
      const that = this;
      uni.chooseImage({
        // count:  允许上传的照片数量
        count: 1,
        // sizeType:  //original 原图，compressed 压缩图，默认二者都有
        sizeType: 'compressed',
        success(res) {
          console.log(111222, res);
          uni.showLoading({
            title: '加载中',
          });
          that.uploadPic(res.tempFilePaths[0]);
        },
        fail: res => {
          console.log(res);
          uni.hideLoading();
          uni.showToast({
            title: '图片选取',
            duration: 3000,
            icon: 'none',
          });
        },
      });
    },
    uploadPic(picPath) {
      const that = this;
      uni.uploadFile({
        url: 'https://www.djsche.com/prod-api/common/upload/oss', //仅为示例，非真实的接口地址
        filePath: picPath,
        name: 'file',
        success: res => {
          console.log(1100000, res);
          uni.hideLoading();
          if (JSON.parse(res.data).code === 200) {
            // 上传成功再显示图片
            that.tempImgUrl = picPath;
            //console.log(uploadFileRes.data);
            console.log(12229999, JSON.parse(res.data).imgUrl);
            that.mjwjForm.sixLable = JSON.parse(res.data).imgUrl;
          } else {
            uni.showToast({
              title: '图片上传失败',
              duration: 3000,
              icon: 'none',
            });
          }
        },
        fail: res => {
          console.log(res);
          uni.hideLoading();
          uni.showToast({
            title: '图片上传失败',
            duration: 3000,
            icon: 'none',
          });
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.qrcode {
  width: 200rpx;
  height: 200rpx;
  margin: 20rpx auto;
}
.qrcode-desc {
  text-align: center;
}
.order {
  color: #fff;
  padding-bottom: 150rpx;
  background: #2a3a52;
  min-height: 100vh;
  .msg {
    padding: 40rpx;
    height: 189rpx;
    background: linear-gradient(135deg, #7692bb 0%, #425985 100%);
    .type {
      font-size: 40rpx;
      line-height: 56rpx;
    }
    .text {
      margin-top: 20rpx;
      font-size: 24rpx;
      line-height: 33rpx;
    }
  }
  .msglist {
    margin: 30rpx 20rpx;
    padding: 40rpx;
    background: linear-gradient(135deg, #7692bb 0%, #425985 100%);
    border-radius: 20rpx;
    .title {
      font-size: 32rpx;
      padding-bottom: 30rpx;
      font-weight: 600;
      color: #ffffff;
      line-height: 45rpx;
      border-bottom: 1px solid #94a1b8;
      .copy {
        float: right;
      }
    }
    .list {
      font-size: 26rpx;
      line-height: 67rpx;
      color: #f6f7f9;
      text {
        float: right;
      }
      .addr {
        color: red;
      }
      .golden {
        color: #ffe471;
      }
    }
    .pack {
      font-size: 26rpx;
      text-align: center;
      color: #ffe471;
    }
  }
  .msglist-order {
    margin: 30rpx 20rpx 0;
    padding: 40rpx;
    background: linear-gradient(135deg, #7692bb 0%, #425985 100%);
    border-radius: 20rpx 20rpx 0 0;
    .title {
      font-size: 32rpx;
      padding-bottom: 30rpx;
      font-weight: 600;
      color: #ffffff;
      line-height: 45rpx;
      border-bottom: 1px solid #94a1b8;
    }
    .list {
      font-size: 26rpx;
      line-height: 67rpx;
      color: #f6f7f9;
      display: flex;
      align-items: center;
      text {
        /* float: right; */
        flex: 1;
        text-align: right;
        line-height: 33rpx;
      }
      .golden {
        color: #ffe471;
      }
    }
    .pack {
      font-size: 26rpx;
      text-align: center;
      color: #ffe471;
    }
    .navigation-icon {
      display: inline-block;
      background: #ffffff;
      height: 36rpx;
      border-radius: 22px;
      line-height: 36rpx;
      padding: 0 20rpx;
      font-size: 26rpx;
      color: #4e6792;
      image {
        width: 24rpx;
        height: 24rpx;
      }
    }
  }

  .open-close {
    margin: 0 20rpx 0;
    padding: 40rpx;
    background: linear-gradient(135deg, #7692bb 0%, #425985 100%);
    border-radius: 0 0 20rpx 20rpx;
    .pack {
      font-size: 26rpx;
      text-align: center;
      color: #ffe471;
    }
  }
  .bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 110rpx;

    background: linear-gradient(135deg, #7692bb 0%, #425985 100%);
    view {
      width: 161rpx;
      height: 70rpx;
      line-height: 70rpx;
      float: right;
      border-radius: 35rpx;
      text-align: center;
      margin-top: 20rpx;
      margin-right: 20rpx;
    }
    .cancel {
      border: 1px solid #ffffff;
    }
    .pay {
      background: #ffe471;
      color: #4e6792;
    }
  }
  .card-popup {
    .input {
      padding-left: 10rpx;
      line-height: 102rpx;
      font-size: 30rpx;
      display: flex;
      color: #4e6792;
      .placeholder {
        color: #f6f7f9;
      }
      text {
      }
      input,
      picker,
      u-picker {
        flex: 1;
        line-height: 102rpx;
        height: 102rpx;
        text-align: right;
        font-size: 30rpx;
        padding-right: 30rpx;
      }

      .uni-input-placeholder {
        /* WebKit browsers 适配谷歌 */
        color: #fff;
      }
      .uni-input-picker {
        padding-right: 30rpx;
      }

      .picture-item {
        margin: 20rpx 0;
        width: 80%;
        height: 160rpx;
        /* background-color: #7692bb; */
        background-color: #fff;
        color: #fff;
        text-align: center;
        view {
          width: 100%;
          height: 120rpx;
          align-content: center;
          position: relative;
          icon {
            position: absolute;
            right: -20rpx;
            top: -20rpx;
          }
          .imgageDefault {
            width: 80%;
            height: 90%;
            background-size: 100% 100%;
            background-repeat: no-repeat;
          }
          .imgage {
            width: 100%;
            height: 100%;
            background-size: 100% 100%;
            background-repeat: no-repeat;
          }
        }
      }
    }
    .button {
      margin: 20rpx;
      text-align: center;
      view {
        display: inline-block;
        width: 161rpx;
        height: 70rpx;
        line-height: 70rpx;
        border-radius: 35rpx;
        text-align: center;
        margin-top: 20rpx;
        margin-right: 20rpx;
      }
      .cancel {
        color: #b7c0cf;
        border: 1px solid #b7c0cf;
      }
      .sub {
        background: #ffe471;
        color: #4e6792;
      }
    }
  }

  .msglist-pic-content {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    .pic-item-content {
      width: 45%;
      min-height: 208rpx;
      margin-top: 12rpx;

      .pic-item {
        width: 100%;
        height: 158rpx;
      }
      .pic-desc {
        width: 100%;
        height: 30rpx;
        color: #fff;
        text-align: center;
      }
    }
  }

  .picMask {
    width: 100vw;
    height: 100vh;
    display: flex;
    .pic-item {
      margin: 0 auto;
      align-self: center;
      position: absolute;
      left: 0;
      right: 0;
      /* top: 0; */
      /* bottom: 0; */
      /* width: auto;
      height: auto;
      min-width: 50vw;
      min-height: 50vh; */
      max-width: 100vw;
      max-height: 100vh;
    }
  }
}
</style>
